<template>
    <el-dialog :title="$t('gen.prewBtn')" v-model="visible" width="600" :close-on-click-model="false" draggable >


     <!--显示表格数据-->
    <el-table :data="state.dataList" style="w100" v-loading="state.loading"
      border :cell-style="tableStyle.cellStyle"
      :header-cell-style="tableStyle.headerCellStyle"
      >
       <el-table-column :label="$t('column.columnName')" prop="columnName" show-overflow-tooltip />
		   <el-table-column :label="$t('column.columnComment')" prop="columnComment" show-overflow-tooltip />
       <el-table-column :label="$t('column.columnType')" prop="columnType" show-overflow-tooltip />
       <el-table-column :label="$t('column.jdbcType')" prop="jdbcType" show-overflow-tooltip />
       <el-table-column :label="$t('column.columnLength')" prop="columnLength" show-overflow-tooltip />
       <el-table-column :label="$t('column.isPrimaryKey')" prop="isPrimaryKey" show-overflow-tooltip />
    </el-table>
    <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
    
  </el-dialog>
</template>

<script setup lang="ts" name="tableColumnDialog">
import { useI18n } from 'vue-i18n';
import { useListTableColumnApi } from '/@/api/gen/table';
import { BasicTableProps,useTable } from '/@/hooks/table';

const { t } = useI18n();
const state: BasicTableProps = reactive(<BasicTableProps>{
  queryForm: {
    dsName: '',
    tableName:'',
  },
  pageList: useListTableColumnApi,
  createdIsNeed:false
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
const visible = ref(false);
// 打开弹窗
const openDialog = (dsName: string, tableName: string) => {
  visible.value = true;
  state.queryForm.dsName = dsName;
  state.queryForm.tableName = tableName;
  getDataList();
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>